<style lang="scss" scoped>
/deep/ .el-drawer.rtl {
  overflow: scroll;
}

.click-url {
  margin-right: 5px;
  cursor: pointer !important;
}

/*.ignore-text {*/
/*  width: 4em !important;*/
/*  overflow: hidden !important;*/
/*  white-space: nowrap !important;*/
/*  text-overflow: ellipsis !important;*/
/*}*/
.child-div {
  border: 2px solid #F0F2F5;
  margin-top: 10px;
  border-radius: 8px;
  background-color: #F0F2F5;
  padding: 5px;
}

.child-title {
  font-size: 17px;
  font-weight: 600;
  color: #409eff;
  height: 44px;
  line-height: 44px;
}
</style>

<template>
  <el-drawer title="订单冲突处理"
             :visible.sync="dialogVisible"
             append-to-body
             size="60%"
             :close-on-press-escape="false"
             :wrapperClosable="false"
             :before-close="closeDialog">
    <el-form style="width: 90%;margin: 0 auto">
      <!--   待解决的冲突Offers   -->
      <div class="parent-div">
        <h2>待解决的冲突订单</h2>
        <el-table
          :data="parentData"
          stripe
          style="width: 100%">
          <el-table-column
            label="编号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="advName"
            label="广告主名"
            height="250"
            width="180">
          </el-table-column>
          <el-table-column
            prop="advOfferName"
            label="广告主订单"
            width="180">
          </el-table-column>
          <el-table-column
            prop="localCustomerName"
            label="本地广告主名">
          </el-table-column>
          <el-table-column
            prop="localOfferName"
            label="本地订单名">
          </el-table-column>
          <el-table-column
            prop="conflictTime"
            label="冲突时间">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
              <el-button id="id-business-components-handleSolveClick" @click="handleSolveClick(scope)" type="text"
                         size="small">解 决
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--   end: 待解决的冲突Offers   -->

      <div class="child-div" v-show="showChildDiv">
        <!--   广告主分享Offer的基本信息   -->
        <div class="child-adv-offer">
          <div class="child-title">广告主分享订单的基本信息</div>
          <el-table
            :data="childAdvData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="index"
              label="编号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="advOfferId"
              label="订单序号"
              height="250"
              width="100">
            </el-table-column>
            <el-table-column
              prop="advName"
              label="广告主名"
              width="100">
            </el-table-column>
            <el-table-column
              prop="advOfferName"
              label="广告主订单"
              width="100">
            </el-table-column>
            <el-table-column
              prop="productName"
              label="产品信息">
            </el-table-column>
            <el-table-column
              prop=""
              label="应用类型">
              <template slot-scope="scope">
                <div>
                  <a class="click-url" v-show="scope.row.androidUrl !== ''" @click="openUrl(scope.row.androidUrl)">android</a>
                  <a class="click-url" v-show="scope.row.iosUrl !== ''" @click="openUrl(scope.row.iosUrl)">ios</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="platforms"
              label="媒体" width="120">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <div style="width: 20px;margin-right: 4px"
                       v-for="(item,index) in platformLogo(scope.row.websitePlatform)"
                       :key="index">
                    <img style="width: 100%" :src="item.url">
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="country"
              label="投放地区" width="220">
              <template slot-scope="scope">
                <el-tooltip placement="top" effect="light">
                  <div slot="content"><span
                    v-if="scope.row.iosNation !== ''">IOS: {{ controlNation(scope.row.iosNation, 'tooltip') }}</span>
                    <br v-if="scope.row.iosNation !== ''"/> <span
                      v-if="scope.row.androidNation !== ''">Android: {{ controlNation(scope.row.androidNation, 'tooltip') }}</span>
                  </div>
                  <div>
                    <div v-if="scope.row.iosNation !== ''">
                      <el-tag size="small" type="success">IOS:</el-tag>
                      <el-tag size="small" type="info" style="margin-left: 2px">
                        {{ controlNation(scope.row.iosNation, 'info') }}
                      </el-tag>
                    </div>
                    <div v-if="scope.row.androidNation !== ''">
                      <el-tag size="small" type="success">Android:</el-tag>
                      <el-tag size="small" type="info" style="margin-left: 2px">
                        {{ controlNation(scope.row.androidNation, 'info') }}
                      </el-tag>
                    </div>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--   end: 广告主分享Offer的基本信息     -->
        <!--    本地活跃Offer的基本信息    -->
        <div class="child-agency-offer">
          <div class="child-title">本地活跃订单的基本信息</div>
          <el-button id="id-business-components-handleStopAll"
                     type="primary"
                     size="small"
                     icon="el-icon-remove-outline"
                     plain
                     @click="handleStopAll()">全部停止
          </el-button>
          <el-table
            :data="childAgencyData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="customerName"
              label="广告主名">
            </el-table-column>
            <el-table-column
              prop="name"
              label="订单名">
            </el-table-column>
            <el-table-column
              prop="productName"
              label="产品信息">
            </el-table-column>
            <el-table-column
              prop="conflictTime"
              label="应用类型">
              <template slot-scope="scope">
                <div>
                  <a class="click-url" v-show="scope.row.androidUrl !== ''" @click="openUrl(scope.row.androidUrl)">android</a>
                  <a class="click-url" v-show="scope.row.iosUrl !== ''" @click="openUrl(scope.row.iosUrl)">ios</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="conflictTime"
              label="媒体">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <div style="width: 20px;margin-right: 4px"
                       v-for="(item,index) in platformLogo(scope.row.websitePlatform)"
                       :key="index">
                    <img style="width: 100%" :src="item.url">
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="conflictTime"
              label="投放地区" width="200">
              <template slot-scope="scope">
                <el-tooltip placement="top" effect="light">
                  <div slot="content"><span
                    v-if="scope.row.iosNation !== ''">IOS: {{ controlNation(scope.row.iosNation, 'tooltip') }}</span>
                    <br v-if="scope.row.iosNation !== ''"/>
                    <span
                      v-if="scope.row.androidNation !== ''">Android: {{ controlNation(scope.row.androidNation, 'tooltip') }}</span>
                  </div>
                  <div>
                    <div v-if="scope.row.iosNation !== ''">
                      <el-tag size="small" type="success">IOS:</el-tag>
                      <el-tag size="small" type="info" style="margin-left: 2px">
                        {{ controlNation(scope.row.iosNation, 'info') }}
                      </el-tag>
                    </div>
                    <div v-if="scope.row.androidNation !== ''">
                      <el-tag size="small" type="success">Android:</el-tag>
                      <el-tag size="small" type="info" style="margin-left: 2px">
                        {{ controlNation(scope.row.androidNation, 'info') }}
                      </el-tag>
                    </div>
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="订单状态">
              <template slot-scope="scope">
                <el-tag type="info" v-if="scope.row.status === 0">草稿</el-tag>
                <el-tag type="success" v-else-if="scope.row.status === 1">活跃</el-tag>
                <el-tag type="warning" v-else-if="scope.row.status === 2">停止</el-tag>
                <el-tag type="danger" v-else-if="scope.row.status === 3">删除</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--    end: 本地活跃Offer的基本信息   -->
        <el-button id="id-business-components-handleSubmit"
                   icon="el-icon-circle-plus-outline"
                   type="primary"
                   size="small"
                   style="margin-left: 60%;margin-top: 30px;"
                   @click="handleSubmit" :disabled="disabledBtn">保 存
        </el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="handleClose">取 消</el-button>

      </div>
    </el-form>
  </el-drawer>
</template>

<script>
import {getList, agencyOldList, submit} from "@/api/business/offerConflict";
import {getSysDictList} from '@/api/system/dict'
import {platformLogo} from "../../../util/beetles";

export default {
  name: "offerConflictEdit",
  props: {
    dialogVisible: {
      type: Boolean
    }
  },
  watch: {
    dialogVisible: {
      deep: true,
      handler(val, old) {
        if (val === old) {
          return
        }
        getList().then(res => {
          this.parentData = res.data.data;
        });
      }
    },
  },
  data() {
    return {
      showChildDiv: false,
      disabledBtn: true,
      parentData: [],
      childAdvData: [],
      childAgencyData: [],
      stoppedAdvOfferIds: [],
      nationList: [],
      parentNewOfferId: '',
      needStoppedAdvOfferIds: '',
    }
  },
  created() {
    getSysDictList("nation").then(map => {
      this.nationList = map['nation'];
    })
  },
  methods: {
    /**
     * 修改列表中投放地区的格式
     * @param scope
     */
    controlNation(val, tooltip) {
      let nations = []
      val.split(',').map(item => {
        for (let index in this.nationList) {
          if (item === this.nationList[index].dictKey) {
            nations.push(this.nationList[index].dictValue)
          }
        }
      })
      return tooltip === 'tooltip' ? nations.join(',') : nations.join(',').length > 8 ? nations.join(',').substring(0, 7) + ' ...' : nations.join(',')
    },
    //解决按钮点击事件
    handleSolveClick(scope) {
      let raw = scope.row;
      raw['index'] = scope.$index + 1;
      this.showChildDiv = true;
      this.parentNewOfferId = raw.newOfferId;
      this.childAdvData = [raw]
      agencyOldList(raw.newOfferId).then(res => {
        this.childAgencyData = res.data.data;
      });
    },
    //全部停止按钮触发
    handleStopAll() {
      // 1. 页面效果-停止代理商信息
      let oldAgencyData = this.childAgencyData
      let newAgencyData = [];
      for (let i in oldAgencyData) {
        let oldAgencyDataItem = oldAgencyData[i];
        oldAgencyDataItem.status = 2
        newAgencyData.push(oldAgencyDataItem);
      }
      this.childAgencyData = newAgencyData;
      if (newAgencyData.length > 0) {
        this.$message.success("停止成功");
      }
      // 3. 解除保存按鈕的禁用狀態
      this.disabledBtn = false;
    },
    //提交
    handleSubmit() {
      let parentNewOfferId = this.parentNewOfferId;
      submit(parentNewOfferId).then(() => {
        this.$message.success("保存成功");
        this.showChildDiv = false;
        // 解除保存按鈕的禁用狀態
        this.disabledBtn = false;
        //删除改条待解决冲突的订单
        let parentData = this.parentData
        for (let i in parentData) {
          let parentDataItem = parentData[i];
          let advOfferId = parentDataItem.newOfferId
          if (advOfferId === parentNewOfferId) {
            parentData.splice(i, 1)
          }
        }
      });
    },
    // 取消按钮点击
    handleClose() {
      this.showChildDiv = false
      this.disabledBtn = true;
    },
    // 关闭弹窗
    closeDialog() {
      this.reset()
      this.$emit('close-dialog');
      this.$emit('count-conflicted-offer');
    },

    reset() {
      this.parentData = []
      this.childAdvData = []
      this.childAgencyData = []
      this.stoppedAdvOfferIds = []
      this.parentNewOfferId = ''
      // this.needStoppedAdvOfferIds = []
      this.showChildDiv = false
      this.disabledBtn = true
    },

    //媒体 logo
    platformLogo(val) {
      return platformLogo(val)
    },

    //打开 安卓,ios链接
    openUrl(url) {
      if (url.startsWith('http://') || url.startsWith('https://')) {
        window.open(url, "_blank")
      } else {
        window.open('https://' + url, "_blank")
      }

    },
  }

}

</script>

